<template>
  <div class="container" v-loading="loading">
    <h2>pdf合并</h2>
    <el-alert title="todo: 修复第一页空白的问题！" type="warning" :closable="false" />
    <SelectFile :accept="'.pdf'" :multiple="true" @after="handleSelectFile"></SelectFile>
    <el-card shadow="hover" v-if="fileList.length">
      <template #header>
        <div class="card-header">参数设置</div>
      </template>
      <template v-for="file in fileList" :key="file.uid">
        <el-form>
          <el-divider content-position="left">{{ file.name }}</el-divider>
          <el-form-item label="起始页码">
            <el-input-number v-model="file.beginNum" :min="0" :max="file.maxNum" />
          </el-form-item>
          <el-form-item label="结束页码">
            <el-input-number v-model="file.endNum" :min="0" :max="file.maxNum" />
          </el-form-item>
        </el-form>
      </template>
      <el-alert show-icon v-if="errorTitle" :title="errorTitle" type="error" />
      <el-button type="primary" @click="mergePDF">合并</el-button>
    </el-card>
  </div>
</template>

<script lang="ts" setup>
import SelectFile from '@/components/SelectFile.vue'
import { UploadFile } from 'element-plus'
import { ref } from 'vue'
import { useMergePdf } from '@/hooks/useMergePdf'

const fileList = ref<RecordRaw[]>([])
const { loading, parsePDF, mergePDF, errorTitle } = useMergePdf(fileList)
const handleSelectFile = (_: UploadFile, files: UploadFile[]) => {
  fileList.value = files?.map((file) => {
    return {
      ...file,
      beginNum: 0,
      endNum: 0,
      maxNum: 0,
    }
  })
  parsePDF()
}
</script>

<style scoped lang="less">
.container {
  h2 {
    text-align: left;
    margin-bottom: 20px;
  }
  :deep(.el-card__header) {
    padding: 10px;
    .card-header {
      text-align: left;
    }
  }
  :deep(.el-card__body) {
    padding: 10px;
    .el-divider--horizontal {
      margin: 20px 0;
    }
  }
}
</style>
